<template>
  <div class="interview">
    <!-- 导航栏部分 -->
    <van-nav-bar
      title="标题"
      left-text="返回"
      right-text="答题卡"
      left-arrow
      @click-left="$router.go(-1)"
      @click-right="onClickRight"
    >
      <template #title>
        <span>面试题<span>18</span></span>
      </template>
    </van-nav-bar>
    <topic :questionArr="questionArr"></topic>
    <!-- 底部标签 -->
    <van-goods-action>
      <van-goods-action-icon icon="star-o" text="收藏" />
      <van-goods-action-icon icon="edit" text="反馈" />
      <van-goods-action-icon>
        <template #default>
          <span><span>1</span>/18题</span>
        </template>
      </van-goods-action-icon>
      <van-goods-action-icon class="submit">
        <template #default>
          <van-button type="danger" disabled>危险按钮</van-button>
        </template>
      </van-goods-action-icon>
    </van-goods-action>
    <!-- 答题卡区域 -->
    <answersheet ref="answersheet" :questionArr="questionArr" />
  </div>
</template>

<script>
// 获取试题信息 的api
import { interviewQuestions } from '@/api/api.js'
export default {
  components: {
    answersheet: () => import('./answersheet'),
    topic: () => import('./topic')
  },
  data () {
    return {
      itlist: null,
      // 储存题目信息
      questionArr: []
    }
  },
  created () {
    // 获取到答题参数
    this.itlist = JSON.parse(this.$route.params.itlist)
    console.log(this.itlist)
    // 获取题目详细信息
    this.quse()
  },
  methods: {
    // 点击答题卡
    onClickRight () {
      // 点击显示组件
      this.$refs.answersheet.show = true
    },
    async quse () {
      const res = await interviewQuestions(this.itlist)
      this.questionArr = res.data
      console.log(this.questionArr)
    }
  }
}
</script>

<style lang="less" scoped>
.interview {
  .submit {
    margin-left: 100px;
  }
}
</style>
